<template>
	<view>
		<view>
			<uni-card class="dh-card" :class="item.status ? 'okCard':'errCard'" :title="`订单编号:${item.orderId}`"
				:extra="item.status?'已缴纳':'未缴纳'" spacing="0rpx" margin="0rpx" v-for="(item,index) in list" :key="index">
				<view class="content">
					<view class="left">
						<image src="/static/partyBuilding/party/1.png" mode=""></image>
						<span>{{item.goodsName}}</span>
					</view>
					<view class="right">
						￥{{item.amount}}
					</view>
				</view>
				<!-- 期号 -->
				<view class="actions" slot="{actions}">
					<view>期号：{{item.goodsDate}}</view>
					<view v-show="!item.status"><u-button type="error" text="立即支付" @click="Pay(item)"></u-button></view>

				</view>
			</uni-card>
		</view>
		<u-loadmore lineColor="#1CD29B" dashed line :status="status" :loading-text="loadingText"
			:loadmore-text="loadmoreText" :nomore-text="nomoreText" />
	</view>
</template>

<script>
	// import jssdk from 'weixin-js-sdk'
	import {
		payOrderForm,
		getpartyList
	} from '@/api/pay/index.js'
	// 转换二维码
	export default {
		data() {
			return {
				list: [],
				params: {
					pageNum: 1,
					pageSize: 10,
					openid: null
				},
				total: 0,
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pageNum = 1;
			this.status = 'loading'
			// 请求接口
			this.list = [];
			this.getlist()
		},
		// 上拉加载
		onReachBottom() {
			// 当列表数量大于总数量，return
			this.status = 'loading'
			if (this.list.length >= this.total) return this.status = 'nomore';;
			this.params.pageNum++;
			// 请求接口
			this.getlist()
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'openid',
				success: function(res) {
					that.params.openid = res.data.openid
				}
			})
			this.list= []
			this.getlist()

		},
		methods: {
			// 获取党费列表
			async getlist() {
				const result = await getpartyList(this.params.openid)
				// console.log('党费列表', result)
				const data = result.data.result;
				this.list = this.list.concat(data)
				uni.stopPullDownRefresh(); //刷新图片关闭
				if (this.list.length >= this.total) {
					this.status = 'nomore';
				} else {
					this.status = 'loadmore';
				}
			},
			// 点击详情
			async Pay(item) {
				// console.log('12312',item)
				let that = this;
				let params = {
					amount: item.amount,
					desc: item.goodsName
				}
				// console.log('参数', params)
				const result = await payOrderForm(params)
				console.log('支付接口返回', result)
				let codeurl = result.data.code_url;
				let orderFormId = result.data.orderFormId
				uni.navigateTo({
					url: `/pages/partyBuilding/partyMembershipDues/QRcode?codeurl=${encodeURIComponent(codeurl)}&orderFormId=${orderFormId}`
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	::v-deep .dh-card {
		margin-bottom: 20rpx;

		.uni-card__header {
			font-size: 28rpx;
			font-weight: 600;
		}

		.uni-card__content {
			.content {
				padding: 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				color: black;

				.left {
					display: flex;
					align-items: center;
					font-weight: 600;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;
					}
				}

				.right {
					color: red;
				}

			}
		}
	}

	::v-deep .errCard {
		.uni-card__header-extra-text {
			color: red !important;
		}

		.actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	::v-deep .okCard {
		.uni-card__header-extra-text {
			color: black !important;
		}
	}
</style>